import React,{useEffect,useState,useRef} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,Image,
    DeviceEventEmitter, TextInput,
} from 'react-native';
import Header from '../../widgets/Header';
import {FontFamily, getffly} from '../../utils/common';
import screen from '../../utils/screen';
import {useStores} from '../../store';
import {observer} from 'mobx-react';
import {GrayBtn, LGBtn} from '../../widgets/buttons';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';
import Images from '../../images/Images';
import Constants from '../../utils/Constants';
import MyProgress from '../../widgets/MyProgress';
import AppEvent from '../../utils/AppEvent';



export default ({navigation})=>{


    const [data,setData] = useState(null)


    useEffect(()=>{
        getData()
    },[])

    const getData = ()=>{

        AppModal.showLoading();

        RequestUtil.get(Api.inviteDetail).then(res=>{

            let data = res.data
            console.log('inviteDetail',data)
            AppModal.hideTip()

            setData(data)
        },error=>{
            AppModal.hideTip()
            if(error.code === -111){
                AppModal.showError(error.msg)
            }else{
                AppModal.showError(error.msg)
            }
            console.log('inviteDetail',error)
        })

    }

    const onReceive = ()=>{
        AppModal.showLoading();

        RequestUtil.post(Api.referralReceive).then(res=>{
            console.log("user/referral/receive::" + res.data);
            AppModal.hideTip()
            AppModal.showSuccess("Reward received")
            DeviceEventEmitter.emit(AppEvent.update_referralReward)
            getData()
        },error=>{
            AppModal.hideTip()
            AppModal.showError(error.msg)
            console.log('user/referral/receive',error)
        })
    }

    const getStatusIcon = (status)=>{
        if(status === 'complete') return Images.success
        if(status === 'start') return Images.flag
        if(status === 'lock') return Images.lock
    }

    const renderItem = (item,index)=>{

        return (
            <View style={{height:screen.PIXEL_70,width:'100%',flexDirection:'row',alignItems:'center'}}
                  key={index.toString()}
            >
                <Text style={{fontSize:11,color:'#FF7012',flex:1,textAlign:'center'}}>T{item.id}</Text>
                <Text style={{fontSize:11,color:'#0B897A',flex:1,textAlign:'center'}}>{item.member} {Constants.team.qualified}</Text>
                <Text style={{fontSize:11,color:'#FF7012',flex:1,textAlign:'center'}}>{Constants.appsymbol} {item.reward}</Text>
                <View style={{flex:1,alignItems:'center'}}>
                    <Image source={getStatusIcon(item.status)}
                           style={{width:screen.PIXEL_30,height:screen.PIXEL_30}}
                           resizeMode={'contain'}/>
                </View>

            </View>
        )
    }

    const renderTop = ()=>{

        const {referralReward} = data
        return (
            <View style={{padding:screen.PIXEL_40}}>
                <View style={{flexDirection:'row',justifyContent:'space-between',marginVertical:screen.PIXEL_20}}>
                    <View style={{alignItems:'center'}}>
                        <Text style={{fontSize:13,color:'#000'}}>{Constants.team.level_reached}</Text>
                        <Text style={{fontFamily:getffly(FontFamily.medium),color:'#FF7B14',fontSize:19,fontWeight:'500'}}>{referralReward.levelReached == 0 ? Constants.common.na :'T' + referralReward.levelReached}</Text>
                    </View>

                    <View style={{alignItems:'center'}}>
                        <Text style={{fontSize:13,color:'#000'}}>{Constants.team.qualified_members}</Text>
                        <Text style={{fontFamily:getffly(FontFamily.medium),color:'#FF7B14',fontSize:19,fontWeight:'500'}}>{referralReward.qualifiedMembers}</Text>
                    </View>

                    <View style={{alignItems:'center'}}>
                        <Text style={{fontSize:13,color:'#000'}}>{Constants.team.total_rewards}</Text>
                        <Text style={{fontFamily:getffly(FontFamily.medium),color:'#FF7B14',fontSize:13,fontWeight:'500'}}>{Constants.appsymbol}
                            <Text style={{fontSize:19}}> {referralReward.totalRewards}</Text>

                        </Text>
                    </View>
                </View>

                <Text style={{fontSize:13,color:'#000'}}>{'Next Level'}</Text>

                <View style={{flexDirection:'row',height:screen.PIXEL_80}}>
                    <View style={{flex:1,marginRight:screen.PIXEL_20,justifyContent:'space-between'}}>
                        <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                            <Text style={{color:'#FF7B14',fontSize:13}}>{referralReward.levelNext.progress}/{referralReward.levelNext.total}
                                <Text style={{color:'#377C74'}}> {Constants.team.qualified}</Text>
                            </Text>
                            <Text style={{color:'#FF7B14',fontSize:13}}>{Constants.appsymbol}
                                <Text style={{fontSize:19}}>{referralReward.levelNext.reward}</Text>
                            </Text>
                        </View>

                        <MyProgress style={{width:screen.width - screen.PIXEL_320,height:10}} progress={referralReward.levelNext.progress/referralReward.levelNext.total}/>

                    </View>

                    {
                        referralReward.levelNext.progress === referralReward.levelNext.total ? (
                            <LGBtn
                                title={Constants.team.receive}
                                style={{width:screen.PIXEL_180,height:screen.PIXEL_80}}
                                onPress={()=>{
                                    onReceive()
                                }}
                            />
                        ):(
                            <GrayBtn
                                title={Constants.team.receive}
                                style={{width:screen.PIXEL_180,height:screen.PIXEL_80}}
                            />
                        )
                    }

                </View>

            </View>
        )
    }

    const renderBottom = ()=>{
        return (
            <View style={{padding:screen.PIXEL_20}}>
                <View style={{flexDirection:'row'}}>
                    <Text style={{color:'#A3A3A3',fontSize:11}}>{'1.'}</Text>
                    <Text style={{color:'#A3A3A3',fontSize:11}}>{Constants.team.team_ref_reward_1 + Constants.appsymbol + ' ' + data.condition +'.' }</Text>
                </View>
                <View style={{flexDirection:'row',marginTop:screen.PIXEL_30}}>
                    <Text style={{color:'#A3A3A3',fontSize:11}}>{'2.'}</Text>
                    <Text style={{color:'#A3A3A3',fontSize:11}}>{Constants.team.team_ref_reward_2 }</Text>
                </View>
                <View style={{flexDirection:'row',marginTop:screen.PIXEL_30,marginBottom:screen.PIXEL_100}}>
                    <Text style={{color:'#A3A3A3',fontSize:11}}>{'3.'}</Text>
                    <Text style={{color:'#A3A3A3',fontSize:11}}>{Constants.team.team_ref_reward_3  }</Text>
                </View>
            </View>
        )
    }

    return (
        <View style={styles.container}>

            <Header title={Constants.team.referral_reward} navigation={navigation}/>

            {
                data && (
                    <ScrollView contentContainerStyle={styles.content}>
                        {renderTop()}
                        <View style={{backgroundColor: '#7ABCB6',height:screen.PIXEL_70,width:'100%',flexDirection:'row',alignItems:'center'}}>
                            <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.level}</Text>
                            <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.member}</Text>
                            <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.reward}</Text>
                            <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.status}</Text>
                        </View>

                        {
                            data.list.map((item,index)=>{
                                return renderItem(item,index)
                            })
                        }


                        {renderBottom()}

                    </ScrollView>
                )
            }



        </View>
    )
}

const styles= StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#fff'
    },
    content:{

    }

})
